<template>
  <div
    class="home-page common-page"
    v-if="isShow"
    style="margin-bottom:env(safe-area-inset-bottom);margin-bottom:constant(safe-area-inset-bottom"
  >
    <van-swipe
      class="my-swipe"
      :show-indicators="false"
    >
      <van-swipe-item
        v-for="(item,index) in bannerList"
        :key="index"
      >
        <img
          :src="item"
          alt=""
        >
      </van-swipe-item>
    </van-swipe>
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      style="margin-bottom:50px;"
    >
      <div class="list">
        <blind-box-card-item
          v-for="(item,index) in boxList"
          :key="index"
          class="card-item"
          :blindBoxInfo="item"
          @enterToBlindBoxDetail="enterToBlindBoxDetail"
          @onBlinkBoxImgClick="onBlinkBoxImgClick"
        ></blind-box-card-item>
      </div>
    </van-list>
    <tabbar-custom active="0"></tabbar-custom>
  </div>
</template>

<script>
import {
  Button,
  NoticeBar,
  Swipe,
  SwipeItem,
  Tabbar,
  TabbarItem,
  List,
} from "vant";
import BindBoxSwiper from "@/components/BindBoxSwiper";
import TabbarCustom from "@/components/TabbarCustom";
import BlindBoxCardItem from "@/components/BlindBoxCardItem";
import utilTool from "@/common/utils/utils";
import store from "@/store";
import { mapGetters } from "vuex";
import apBox from "@/common/api/apBox";
import apiUser from "@/common/api/apiUser.js";
import appVersion from "@/common/api/appVersion";
import Share from "./mixin/share";

const wx = require("weixin-js-sdk");
const appId = process.env.VUE_APP_APPID;
export default {
  name: "Rule",
  components: {
    [Button.name]: Button,
    [NoticeBar.name]: NoticeBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [List.name]: List,
    [BindBoxSwiper.name]: BindBoxSwiper,
    [TabbarCustom.name]: TabbarCustom,
    [BlindBoxCardItem.name]: BlindBoxCardItem,
  },
  mixins: [Share],
  data() {
    return {
      prizeInfo: {}, //奖品信息
      prizeType: "", // 获得的奖品类型  0是现金券1是商品
      prizeId: "", // 获得的奖品id
      timer: null, //定时器
      orderId: "", //订单id
      isShow: false,
      active: 0,
      loading: false,
      finished: true,
      bannerList: [], //轮播图
      boxList: [], //奖品
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.getVersionUpgrateInfo();
    this.getHomeInfoByUserId();
    this.clearLocalstorageCurrAddress();
    this.setShare();
  },
  methods: {
    // 获取版本升级信息
    getVersionUpgrateInfo() {
      this.$toast.loading();
      appVersion.getVersionInfo().then((data) => {
        this.$toast.clear();
        if (data.data) {
          this.$router.replace({
            path: "/VersionUpgrade",
          });
          return;
        }
        this.isShow = true;
      });
    },
    //  获取首页相关信息
    getHomeInfoByUserId() {
      this.$toast.loading();
      apBox.getHomeInfo({ userId: this.userInfo.userId }).then((data) => {
        this.$toast.clear();
        this.getHomeInfoSuccess(data.data);
      });
    },
    //  获取首页信息成功
    getHomeInfoSuccess(data) {
      let bannerList = [];
      bannerList.push(data.banner);
      this.bannerList = bannerList;
      this.boxList = data.boxList;
    },
    //  清除本地缓存的上一次选中的邮寄地址
    clearLocalstorageCurrAddress() {
      store.dispatch("address/setDefaultAddressInfo", {});
      store.dispatch("address/setCurrAddressInfo", {});
    },
    //  进去详情页面
    onBlinkBoxImgClick(info) {
      this.enterToBlindBoxDetail(info);
    },
    enterToBlindBoxDetail(info) {
      this.$router.push({
        path: "/BlindBoxDetail",
        query: {
          boxId: info.id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.home-page {
  padding: 0;
}
.my-swipe {
  width: 100%;
  height: 300px;
}
.van-swipe-item {
  img {
    width: 100%;
    height: 100%;
  }
}
.van-list {
  padding: 0 24px;
  box-sizing: border-box;
  .list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    .card-item {
      width: 47.5%;
    }
  }
}
.van-swipe__track {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>
